<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>task14</title>
	<link rel="stylesheet" href="css/main.css">
	<script src="../js任务/jquery-3.6.0.js"></script>
	<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
</head>
<body>
	<header>
		<!-- 顶部 -->
		<div class="g-header">
			<div class="container">
				<span class="phone-num">客服热线:010-594-78634</span>
				<div class="other-links pull-right">
					<a href="#" class="login">登录</a>
					<a href="#" class="sign">注册</a>
				</div>
				<div class="contact-way pull-right">
					<a href="#" class="wechat"></a>
					<a href="#" class="qq"></a>
					<a href="#" class="weibo"></a>
				</div>
			</div>
		</div>
		<!-- 导航 -->
		<div class="navbar">
			<div class="container clearfix">
				<a class="logo" href="index.html">
					<img src="image/logo.png" alt="logo">
				</a>
				<div class="navbar-toggle" >
					<button class="navbar-btn" onClick="showdiv()">
						<span class="icon-bar"></span>
						<span class="icon-bar"></span>
						<span class="icon-bar"></span>
					</button>
					
				</div>
				<ul class="navbar-list">
					<li class="item"><a href="index.html">首页</a></li>
					<li class="item"><a href="profession.html">职业</a></li>
					<li class="item"><a href="enterprise.html">企业</a></li>
					<li class="item"><a href="#">关于</a></li>
				</ul>
			</div>
			<div class="menu">
				<ul>
					<li>首页</li>
					<li>职业</li>
					<li>企业</li>
					<li>关于</li>
				</ul>
			</div>
		</div>
	</header>
	<main>
		<!-- 幻灯片 -->
		<div class="carousel slide myslide" data-ride="carousel" id="myslide">
			<ol class="carousel-indicators">
				<li data-target="#myslide" data-slide-to="0" class="active"></li>
				<li data-target="#myslide" data-slide-to="1"></li>
				<li data-target="#myslide" data-slide-to="2"></li>
			</ol>
			<div class="carousel-inner">
				<div class="item active">
					<img src="image/banner-1.jpg">
				</div>
				<div class="item">
					<img src="image/banner-1.jpg">
				</div>
				<div class="item">
					<img src="image/banner-1.jpg">
				</div>
			</div>
			<a class="left carousel-control" href="#myslide" data-slide="prev">
				<span class="glyphicon glyphicon-chevron-left"></span>
			</a>
			<a class="right carousel-control" href="#myslide" data-slide="next">
				<span class="glyphicon glyphicon-chevron-right"></span>
			</a>
		</div>
		<div class="container centent">
			<!-- section1 -->
			<div class="row section1">
				<div class="col-sm-12 col-md-3">
					<div class="img text-center">
						<img src="image/rocket.png" class="icon">
					</div>
					<p class="title text-center">高效</p>
					<p class="detail">将三到五年的成长时间，缩短到一年到三年</p>
				</div>
				<div class="col-sm-12 col-md-3">
					<div class="img text-center">
						<img src="image/archive.png">
					</div>
					<p class="title text-center">规范</p>
					<p class="detail">标准的实战教程，不会走弯路</p>
				</div>
				<div class="col-sm-12 col-md-3">
					<div class="img text-center">
						<img src="image/shape.png">
					</div>
					<p class="title text-center">人脉</p>
					<p class="detail">同班好友，同院学长，技术大师，入学就混入职脉圈，为以后铺平道路</p>
				</div>
				<div class="col-sm-12 col-md-3">
					<div class="num-value">
						<div class="online">
							<p class="num">12400</p>
							<p class="num-exp">累计在线学习人数</p>
						</div>
						<div class="online">
							<p class="num">12400</p>
							<p class="num-exp">累计在线学习人数</p>
						</div>
					</div>
				</div>
			</div>
			<!-- 学习路径 -->
			<div class="row how-study">
				<p class="g-title">如何学习</p>
				<div class="col-sm-6 col-md-3">
					<span>1</span>
					<p class="detail">匹配你现在的个人情况寻找适合自己的岗位</p>
				</div>
				<div class="col-sm-6 col-md-3">
					<span>2</span>
					<p class="detail">了解职业前景薪金待遇、竞争压力等</p>
				</div>
				<div class="col-sm-6 col-md-3">
					<span>3</span>
					<p class="detail">掌握行业内顶级技能</p>
				</div>
				<div class="col-sm-6 col-md-3">
					<span>4</span>
					<p class="detail">查看职业目标任务</p>
				</div>
				<div class="col-sm-6 col-md-3">
					<span>5</span>
					<p class="detail">参考学习资源，掌握技能点，逐个完成任务</p>
				</div>
				<div class="col-sm-6 col-md-3">
					<span>6</span>
					<p class="detail">加入班级，和小伙伴们互帮互助，一块学习</p>
				</div>
				<div class="col-sm-6 col-md-3">
					<span>7</span>
					<p class="detail">选择导师，一路引导，加速自己成长</p>
				</div>
				<div class="col-sm-6 col-md-3">
					<span>8</span>
					<p class="detail">完成职业技能，升级业界大牛</p>
				</div>
			</div>
			<!-- 优秀成员展示 -->
			<p class="g-title">优秀学员展示</p>
			<div class="carousel slide member" data-ride="carousel" id="member">
				<ol class="carousel-indicators">
					<li data-target="#member" data-slide-to="0" class="active"></li>
					<li data-target="#member" data-slide-to="1"></li>
					<li data-target="#member" data-slide-to="2"></li>
					<li data-target="#member" data-slide-to="3"></li>
				</ol>
				<div class="carousel-inner">
					<div class="item active">
						<div class="row student">
							<div class="col-sm-6 col-md-3">
								<div class="people">
									<div class="avatar text-center">
										<img src="image/Avatar-2.png">
									</div>
									<p class="name">技术顾问：罗大佑</p>
									<p class="info">百度技术总监：互联网基础服务领域，从事虚拟主机、云服务器、域名。曾任新网高级技术经理，负责技术研发、团队管理与建设。</p>
								</div>
							</div>
							<div class="col-sm-6 col-md-3">
								<div class="people">
									<div class="avatar text-center">
									<img src="image/Avatar-1.png">
									</div>
									<p class="name">技术顾问：罗大佑</p>
									<p class="info">百度技术总监：互联网基础服务领域，从事虚拟主机、云服务器、域名。曾任新网高级技术经理，负责技术研发、团队管理与建设。</p>
								</div>
							</div>
							<div class="col-sm-6 col-md-3">
								<div class="people">
									<div class="avatar text-center">
									<img src="image/Avatar-2.png">
									</div>
									<p class="name">技术顾问：罗大佑</p>
									<p class="info">百度技术总监：互联网基础服务领域，从事虚拟主机、云服务器、域名。曾任新网高级技术经理，负责技术研发、团队管理与建设。</p>
								</div>
							</div>
							<div class="col-sm-6 col-md-3">
								<div class="people">
									<div class="avatar text-center">
									<img src="image/Avatar-4.png">
									</div>
									<p class="name">技术顾问：罗大佑</p>
									<p class="info">百度技术总监：互联网基础服务领域，从事虚拟主机、云服务器、域名。曾任新网高级技术经理，负责技术研发、团队管理与建设。</p>
								</div>
							</div>
						</div>
					</div>
					<div class="item">
						<div class="row student">
							<div class="col-sm-6 col-md-3">
								<div class="people">
									<div class="avatar text-center">
									<img src="image/Avatar-3.png">
									</div>
									<p class="name">技术顾问：罗大佑</p>
									<p class="info">百度技术总监：互联网基础服务领域，从事虚拟主机、云服务器、域名。曾任新网高级技术经理，负责技术研发、团队管理与建设。</p>
								</div>
							</div>
							<div class="col-sm-6 col-md-3">
								<div class="people">
									<div class="avatar text-center">
									<img src="image/Avatar-1.png">
									</div>
									<p class="name">技术顾问：罗大佑</p>
									<p class="info">百度技术总监：互联网基础服务领域，从事虚拟主机、云服务器、域名。曾任新网高级技术经理，负责技术研发、团队管理与建设。</p>
								</div>
							</div>
							<div class="col-sm-6 col-md-3">
								<div class="people">
									<div class="avatar text-center">
									<img src="image/Avatar-2.png">
									</div>
									<p class="name">技术顾问：罗大佑</p>
									<p class="info">百度技术总监：互联网基础服务领域，从事虚拟主机、云服务器、域名。曾任新网高级技术经理，负责技术研发、团队管理与建设。</p>
								</div>
							</div>
							<div class="col-sm-6 col-md-3">
								<div class="people">
									<div class="avatar text-center">
									<img src="image/Avatar-4.png">
									</div>
									<p class="name">技术顾问：罗大佑</p>
									<p class="info">百度技术总监：互联网基础服务领域，从事虚拟主机、云服务器、域名。曾任新网高级技术经理，负责技术研发、团队管理与建设。</p>
								</div>
							</div>
						</div>
					</div>
					<div class="item">
						<div class="row student">
							<div class="col-sm-6 col-md-3">
								<div class="people">
									<div class="avatar text-center">
									<img src="image/Avatar-3.png">
									</div>
									<p class="name">技术顾问：罗大佑</p>
									<p class="info">百度技术总监：互联网基础服务领域，从事虚拟主机、云服务器、域名。曾任新网高级技术经理，负责技术研发、团队管理与建设。</p>
								</div>
							</div>
							<div class="col-sm-6 col-md-3">
								<div class="people">
									<div class="avatar text-center">
									<img src="image/Avatar-1.png">
									</div>
									<p class="name">技术顾问：罗大佑</p>
									<p class="info">百度技术总监：互联网基础服务领域，从事虚拟主机、云服务器、域名。曾任新网高级技术经理，负责技术研发、团队管理与建设。</p>
								</div>
							</div>
							<div class="col-sm-6 col-md-3">
								<div class="people">
									<div class="avatar text-center">
									<img src="image/Avatar-2.png">
									</div>
									<p class="name">技术顾问：罗大佑</p>
									<p class="info">百度技术总监：互联网基础服务领域，从事虚拟主机、云服务器、域名。曾任新网高级技术经理，负责技术研发、团队管理与建设。</p>
								</div>
							</div>
							<div class="col-sm-6 col-md-3">
								<div class="people">
									<div class="avatar text-center">
									<img src="image/Avatar-4.png">
									</div>
									<p class="name">技术顾问：罗大佑</p>
									<p class="info">百度技术总监：互联网基础服务领域，从事虚拟主机、云服务器、域名。曾任新网高级技术经理，负责技术研发、团队管理与建设。</p>
								</div>
							</div>
						</div>
					</div>
					<div class="item">
						<div class="row student">
							<div class="col-sm-6 col-md-3">
								<div class="people">
									<div class="avatar text-center">
									<img src="image/Avatar-3.png">
									</div>
									<p class="name">技术顾问：罗大佑</p>
									<p class="info">百度技术总监：互联网基础服务领域，从事虚拟主机、云服务器、域名。曾任新网高级技术经理，负责技术研发、团队管理与建设。</p>
								</div>
							</div>
							<div class="col-sm-6 col-md-3">
								<div class="people">
									<div class="avatar text-center">
									<img src="image/Avatar-1.png">
									</div>
									<p class="name">技术顾问：罗大佑</p>
									<p class="info">百度技术总监：互联网基础服务领域，从事虚拟主机、云服务器、域名。曾任新网高级技术经理，负责技术研发、团队管理与建设。</p>
								</div>
							</div>
							<div class="col-sm-6 col-md-3">
								<div class="people">
									<div class="avatar text-center">
									<img src="image/Avatar-2.png">
									</div>
									<p class="name">技术顾问：罗大佑</p>
									<p class="info">百度技术总监：互联网基础服务领域，从事虚拟主机、云服务器、域名。曾任新网高级技术经理，负责技术研发、团队管理与建设。</p>
								</div>
							</div>
							<div class="col-sm-6 col-md-3">
								<div class="people">
									<div class="avatar text-center">
									<img src="image/Avatar-4.png">
									</div>
									<p class="name">技术顾问：罗大佑</p>
									<p class="info">百度技术总监：互联网基础服务领域，从事虚拟主机、云服务器、域名。曾任新网高级技术经理，负责技术研发、团队管理与建设。</p>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
			<!-- 战略合作企业 -->
			<div class="row enterprise">
				<p class="g-title">战略合作企业</p>
				<div class="col-sm-12 en-logo">
					<div class="logo text-center">
						<img src="image/logo-1.png">
					</div>
				</div>
				<div class="col-sm-12 en-logo">
					<div class="logo text-center">
						<img src="image/logo-2.png">
					</div>
				</div>
				<div class="col-sm-12 en-logo">
					<div class="logo text-center">
						<img src="image/logo-3.png">
					</div>
				</div>
				<div class="col-sm-12 en-logo">
					<div class="logo text-center">
						<img src="image/logo-4.png">
					</div>
				</div>
				<div class="col-sm-12 en-logo">
					<div class="logo text-center">
						<img src="image/logo-5.png">
					</div>
				</div>
			</div>
		</div>
		<!-- 友情链接 -->
		<div class="friend-link">
			<div class="container">
				<div class="row">
					<p class="text-center">友情链接</p>
					<div class="col-sm-12 col-md-6">
						<ul class="link-list clearfix">
							<li><a href="">手机软件</a></li>
							<li><a href="">教师招聘</a></li>
							<li><a href="">找工作</a></li>
							<li><a href="">教师招聘</a></li>
							<li><a href="">找工作</a></li>
							<li><a href="">手机软件</a></li>
							<li><a href="">教师招聘</a></li>
							<li><a href="">手机软件</a></li>
							<li><a href="">手机软件</a></li>
							<li><a href="">找工作</a></li>
						</ul>
					</div>
					<div class="col-sm-12 col-md-6">
						<ul class="link-list clearfix">
							<li><a href="">手机软件</a></li>
							<li><a href="">教师招聘</a></li>
							<li><a href="">找工作</a></li>
							<li><a href="">教师招聘</a></li>
							<li><a href="">找工作</a></li>
							<li><a href="">手机软件</a></li>
							<li><a href="">教师招聘</a></li>
							<li><a href="">手机软件</a></li>
							<li><a href="">手机软件</a></li>
							<li><a href="">找工作</a></li>
						</ul>
					</div>
				</div>
			</div>
		</div>
	</main>
	<footer>
		<div class="container">
			<div class="row">
				<div class="col-sm-12 col-md-4">
					<p>技能树 — 改变你我</p>
					<ul class="about-list clearfix">
						<li><a href="">关于我们</a></li>
						<li><a href="">联系我们</a></li>
						<li><a href="">合作企业</a></li>
					</ul>
				</div>
				<div class="col-sm-12 col-md-4">
					<p>旗下网站</p>
					<ul class="site-list clearfix">
						<li><a href="">草船云孵化器</a></li>
						<li><a href="">最强IT特训营</a></li>
						<li><a href="">葡萄藤轻游戏</a></li>
						<li><a href="">桌游精灵</a></li>
					</ul>
				</div>
				<div class="col-sm-12 col-md-4 ">
					<div class="qr-code text-center">
						<p>微信公众平台</p>
						<img src="image/QR-code.jpg" alt="">
					</div>
				</div>
			</div>
			<p class="text-center h6">Copyright © 2015技能树 www.jnshu.com  All Rights Reserved | 京ICP备13005880号</p>
		</div>
	</footer>
<script>
	// 导航条折叠效果
	$isopen = false;
	$(".navbar-btn").click(function(){
		if(!$isopen){
			$(".navbar-list").slideDown(300,function(){
				$isopen = true;
			});
		}else{
			$(".navbar-list").slideUp(300,function(){
				$isopen = false;
			});
		}
	})
</script>
<script src="./js/index.js"></script>
</body>
</html>